<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>莫尔圆包络线计算系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/plotly.js-dist@2.18.0/plotly.min.js"></script>
    <style>
        body {
            font-family: 'SimSun', serif;
            background-color: #f8f9fa;
        }
        
        .step-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            margin-bottom: 20px;
            background: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .step-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            border-radius: 8px 8px 0 0;
            font-weight: bold;
        }
        
        .step-content {
            padding: 20px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        .data-table {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .result-box {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin-top: 15px;
        }
        
        .iteration-table {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .plot-container {
            height: 600px; /* 原来400px增加1/2 = 600px */
            border: 1px solid #dee2e6;
            border-radius: 5px;
            margin-top: 15px;
        }
        
        .nav-tabs .nav-link.active {
            background-color: #667eea;
            border-color: #667eea;
            color: white;
        }
        
        .nav-tabs .nav-link {
            color: #667eea;
        }
        
        .alert-info {
            background-color: #e3f2fd;
            border-color: #bbdefb;
            color: #0d47a1;
        }
        
        .progress {
            height: 8px;
            margin-bottom: 20px;
        }
        
        .progress-bar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .table-success {
            background-color: #d4edda !important;
        }

        .btn-secondary {
            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
            border: none;
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
        }

        .btn-warning {
            background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
            border: none;
        }

        .btn-warning:hover {
            background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
        }

        .input-group-text {
            background-color: #f8f9fa;
            border-color: #dee2e6;
        }

        .control-buttons {
            position: sticky;
            top: 10px;
            z-index: 1000;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .gap-2 {
            gap: 0.5rem !important;
        }

        @media (max-width: 768px) {
            .control-buttons .btn {
                font-size: 0.875rem;
                padding: 0.375rem 0.75rem;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center mb-4">
                    <i class="fas fa-circle-notch"></i>
                    莫尔圆包络线计算系统
                </h1>
                
                <!-- 进度条 -->
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 25%" id="progressBar"></div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 左侧列 -->
            <div class="col-lg-6">
                <!-- 步骤1: 数据输入和莫尔圆绘制 -->
                <div class="step-card">
                    <div class="step-header">
                        <i class="fas fa-upload"></i> 步骤1: 数据输入和莫尔圆绘制
                    </div>
                    <div class="step-content">
                        <!-- 数据输入选项卡 -->
                        <ul class="nav nav-tabs" id="dataInputTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="manual-tab" data-bs-toggle="tab" data-bs-target="#manual" type="button">
                                    <i class="fas fa-keyboard"></i> 手动输入
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="excel-tab" data-bs-toggle="tab" data-bs-target="#excel" type="button">
                                    <i class="fas fa-file-excel"></i> Excel导入
                                </button>
                            </li>
                        </ul>
                        
                        <div class="tab-content" id="dataInputTabContent">
                            <!-- 手动输入 -->
                            <div class="tab-pane fade show active" id="manual" role="tabpanel">
                                <div class="mt-3">
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label class="form-label">数据类型:</label>
                                            <select class="form-select" id="dataType">
                                                <option value="circles">圆数据 (x, y, r)</option>
                                                <option value="experimental">实验数据 (围压, 抗压强度)</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <!-- 圆数据输入 -->
                                    <div id="circleInputs">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <label class="form-label">圆心X坐标:</label>
                                                <input type="number" class="form-control" id="circleX" step="any">
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label">圆心Y坐标:</label>
                                                <input type="number" class="form-control" id="circleY" step="any">
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label">半径:</label>
                                                <input type="number" class="form-control" id="circleR" step="any" min="0">
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 实验数据输入 -->
                                    <div id="experimentalInputs" style="display: none;">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="form-label">围压 (MPa):</label>
                                                <input type="number" class="form-control" id="confiningPressure" step="any" min="0">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">抗压强度 (MPa):</label>
                                                <input type="number" class="form-control" id="compressiveStrength" step="any" min="0">
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="mt-3">
                                        <button class="btn btn-primary" onclick="addManualData()">
                                            <i class="fas fa-plus"></i> 添加数据
                                        </button>
                                        <button class="btn btn-warning ms-2" onclick="clearAllData()">
                                            <i class="fas fa-trash"></i> 清空数据
                                        </button>
                                        <button class="btn btn-success ms-2" id="autoModeBtn2" onclick="toggleAutoMode()">
                                            <i class="fas fa-magic"></i> <span id="autoModeText2">Auto (开)</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Excel导入 -->
                            <div class="tab-pane fade" id="excel" role="tabpanel">
                                <div class="mt-3">
                                    <div class="alert alert-info">
                                        <strong>文件格式要求:</strong><br>
                                        • 圆数据模式: 表头为 x, y, r<br>
                                        • 实验数据模式: 表头为 围压, 抗压强度
                                    </div>
                                    <input type="file" class="form-control" id="excelFile" accept=".xlsx,.xls">
                                    <div class="mt-2">
                                        <button class="btn btn-primary" onclick="uploadExcel()">
                                            <i class="fas fa-upload"></i> 上传文件
                                        </button>
                                        <button class="btn btn-success ms-2" id="autoModeBtn" onclick="toggleAutoMode()">
                                            <i class="fas fa-magic"></i> <span id="autoModeText">Auto (开)</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据表格 -->
                        <div class="data-table mt-3">
                            <table class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>X坐标</th>
                                        <th>Y坐标</th>
                                        <th>半径</th>
                                    </tr>
                                </thead>
                                <tbody id="dataTableBody">
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- 莫尔圆绘图区域 -->
                        <div class="plot-container" id="mohrCirclePlot"></div>
                        
                        <!-- 图片导出 -->
                        <div class="mt-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>导出选项:</h6>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="includeEnvelope" checked>
                                        <label class="form-check-label" for="includeEnvelope">
                                            包含包络线
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="includeLegend" checked>
                                        <label class="form-check-label" for="includeLegend">
                                            包含图例
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6>导出格式:</h6>
                                    <button class="btn btn-success" onclick="exportPlot('png')">
                                        <i class="fas fa-download"></i> 导出PNG
                                    </button>
                                    <button class="btn btn-success ms-2" onclick="exportPlot('svg')">
                                        <i class="fas fa-download"></i> 导出SVG
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 步骤2: 系数计算 -->
                <div class="step-card">
                    <div class="step-header">
                        <i class="fas fa-calculator"></i> 步骤2: 系数计算
                    </div>
                    <div class="step-content">
                        <button class="btn btn-primary" onclick="calculateCoefficients()">
                            <i class="fas fa-play"></i> 计算系数
                        </button>

                        <div class="result-box" id="coefficientsResult">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧列 -->
            <div class="col-lg-6">
                
                <!-- 步骤3: 牛顿迭代法 -->
                <div class="step-card">
                    <div class="step-header">
                        <i class="fas fa-sync-alt"></i> 步骤3: 牛顿迭代法求解θ
                    </div>
                    <div class="step-content">
                        <!-- 控制按钮区域 - 始终在顶部 -->
                        <div class="control-buttons mb-4 p-3">
                            <div class="d-flex flex-wrap gap-2 justify-content-center">
                                <button class="btn btn-primary" onclick="solveNewton()">
                                    <i class="fas fa-play"></i> 自动迭代
                                </button>
                                <button class="btn btn-secondary" onclick="stepNewton()" id="stepButton" disabled>
                                    <i class="fas fa-step-forward"></i> 逐次迭代
                                </button>
                                <button class="btn btn-warning" onclick="resetNewton()">
                                    <i class="fas fa-undo"></i> 重置
                                </button>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">初始θ值 (弧度):</label>
                                <input type="number" class="form-control" id="initialTheta" value="0" step="any">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">精度 (有效数字):</label>
                                <input type="number" class="form-control" id="precision" value="10" min="1" max="64">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">θ范围调节:</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="thetaMin" value="0" step="0.1" placeholder="最小值">
                                    <span class="input-group-text">~</span>
                                    <input type="number" class="form-control" id="thetaMax" value="1.5708" step="0.1" placeholder="最大值">
                                </div>
                            </div>
                        </div>

                        <!-- f(θ)函数图像 -->
                        <div class="plot-container" id="functionPlot" style="height: 450px;">
                        </div>
                        
                        <div class="iteration-table mt-3">
                            <table class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th>迭代次数</th>
                                        <th>θ值</th>
                                        <th>f(θ)</th>
                                        <th>|Δθ|</th>
                                    </tr>
                                </thead>
                                <tbody id="iterationTableBody">
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="plot-container" id="newtonPlot"></div>
                    </div>
                </div>
                
                <!-- 步骤4: 直线方程参数 -->
                <div class="step-card">
                    <div class="step-header">
                        <i class="fas fa-chart-line"></i> 步骤4: 直线方程参数计算
                    </div>
                    <div class="step-content">
                        <button class="btn btn-primary" onclick="calculateLineParameters()">
                            <i class="fas fa-play"></i> 计算直线参数
                        </button>
                        
                        <div class="result-box" id="lineParametersResult">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
